<template>
  <el-scrollbar height="100%">
    <HeaderView
      :userCount="userCount?.allTypeCount"
      :gameCount="gameCount"
      :postCount="postCount"
    />
    <el-card style="width: 100%; height: 500px" shadow="hover">
      <OnllinoCharts />
    </el-card>
    <div
      style="
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 1em 0;
      "
    >
      <el-card class="card" shadow="hover">
        <TypeCharts :typeCount="userCount" />
      </el-card>
      <el-card class="card" shadow="hover">
        <!-- <el-row>
          <el-col :span="6">
            <el-statistic title="总用户数" :value="outputValue" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="活跃用户数" :value="outputValue" />
          </el-col>
        </el-row> -->
      </el-card>
    </div>
    <!-- <div id="aaaaaa" style="width: 49%; height: 49%">
      <el-card class="card" shadow="hover"></el-card>
    </div> -->
  </el-scrollbar>
</template>

<script lang="ts" setup>
import OnllinoCharts from "./onllinoCharts.vue";
import TypeCharts from "./typeCharts.vue";
import HeaderView from "./headerView.vue";
import {
  getUsersTypeCountApi,
  getGameCountApi,
  getPostCountApi,
} from "@/apis/admin";

const userCount = ref();
const gameCount = ref();
const postCount = ref();

async function getUsersTypeCount() {
  try {
    const res: any = await getUsersTypeCountApi();
    if (res.code === 0) {
      userCount.value = res.data;
    }
  } catch (error) {
    console.error(error);
  }
}

async function getGameCount() {
  try {
    const res: any = await getGameCountApi();
    if (res.code === 0) {
      gameCount.value = res.data;
    }
  } catch (error) {
    console.error(error);
  }
}

async function getPostCount() {
  try {
    const res: any = await getPostCountApi();
    if (res.code === 0) {
      postCount.value = res.data;
    }
  } catch (error) {
    console.error(error);
  }
}

onMounted(() => {
  getUsersTypeCount();
  getGameCount();
  getPostCount();
});
</script>

<style scoped>
.card {
  width: 49%;
  /* justify-content: center; */
  /* align-items: center; */
}
</style>
